<template>
  <div>
    <mt-navbar fixed class="home-title">
      <router-link to="/home">
        <mt-button class='bg-color' icon="back"></mt-button>
      </router-link>
      <div class="search_box">
        <input class="home-search" name="search" id="" v-model="keyWord" value="" placeholder="请输入搜索关键字" autofocus="autofocus" />
        <div class="select_box" @click="openPic">
          {{selectValue}}
        </div>
      </div>
      <mt-actionsheet :actions="actions" v-model="sheetVisible">
      </mt-actionsheet>
      <span class="search" @click="getSearchList">搜索</span>
    </mt-navbar>
    <div class="list_box" v-if='selectIndex == 1'>
      <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
        <ul>
          <div v-for="(item,index) in list" :key="index" @click="goToBook(item)" :to='{name:"bookcontent",params:{bookdata:JSON.stringify(item.bookId)}}'>
            <li>
              <span v-html="item.bookName"></span>
              <img src="../../../static/text.png" alt="">
            </li>
          </div>
        </ul>
      </mt-loadmore>
    </div>
    <div class="list_box" v-if='selectIndex == 2'>
      <!-- <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore"> -->
      <ul>
        <div v-for="(item,index) in list" :key="index" @click="goToReadd(item)">
          <li>
            <span>{{item.mainTitle}}</span>
            <img src="../../../static/text.png" alt="">
          </li>
        </div>
      </ul>
      <!-- </mt-loadmore> -->
    </div>
    <div class="list_box" v-if='selectIndex == 3'>
      <!-- <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore"> -->
      <ul>
        <div v-for="(item,index) in list" :key="index" @click="goToVideo(item)">
          <li>
            <span>{{item.videoName}}</span>
            <img src="../../../static/text.png" alt="">
          </li>
        </div>
      </ul>
      <!-- </mt-loadmore> -->
    </div>
    <div class="list_box" v-if='selectIndex == 4'>
      <!-- <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore"> -->
      <ul>
        <div v-for="(item,index) in list" :key="index" @click="goToNews(item)">
          <li>
            <span>{{item.externalSourceName}}</span>
            <img src="../../../static/text.png" alt="">
          </li>
        </div>
      </ul>
      <!-- </mt-loadmore> -->
    </div>
    <div class="list_box" v-if='selectIndex == 5'>
      <!-- <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore"> -->
      <ul>
        <div v-for="(item,index) in list" :key="index" @click="goToRead(item)">
          <li>
            <span>{{item.externalSourceName}}</span>
            <img src="../../../static/text.png" alt="">
          </li>
        </div>
      </ul>
      <!-- </mt-loadmore> -->
    </div>
  </div>
</template>
<script>
import { Toast, Indicator } from "mint-ui";
import api from "../../api/api.js";
export default {
  data() {
    return {
      selectValue: "图书",
      selectIndex: 1,
      actions: [
        {
          name: "图书",
          method: this.selectV // 调用methods中的函数
        },
        {
          name: "期刊",
          method: this.selectV // 调用methods中的函数
        },
        {
          name: "报纸",
          method: this.selectV // 调用methods中的函数
        },
        {
          name: "视听",
          method: this.selectV // 调用methods中的函数
        },
        {
          name: "悦读",
          method: this.selectV // 调用methods中的函数
        }
      ],
      list: [],
      sheetVisible: false,
      allLoaded: false,
      keyWord: "",
      pageIndex: 1
    };
  },
  methods: {
    //报纸
    goToNews(e) {
      console.log(e);
      let imgSrc = api.PdfSrc;
      let str = e.fileName.substring(0, 12);
      this.$router.push({
        name: "readingPdf",
        params: {
          bookurl: imgSrc + "/skjc_bz/" + str + "/" + e.fileName + ".pdf",
          bookName: e.externalSourceName
        }
      });
    },
    //悦读
    goToReadd(item) {
      this.$router.push({
        name: "readcontent",
        params: { readdata: JSON.stringify(item) }
      });
    },
    goToVideo(item) {
      // console.log(e);
      this.$router.push({
        name: "videocontent",
        params: {
          videodata: item
        }
      });
    },
    goToBook(e) {
      this.$router.push({
        name: "bookcontent"
      });
      localStorage.setItem("bookId", e.bookId);
    },
    goToRead(e) {
      console.log(e);
      let imgSrc = api.PdfSrc;
      let str = e.fileName.substring(0, 10);
      this.$router.push({
        name: "readingPdf",
        params: {
          bookurl: imgSrc + "/skjc_qk/" + str + "/" + e.fileName + ".pdf",
          bookName: e.externalSourceName
        }
      });
    },
    getSearchList() {
      let that = this;
      if (that.selectValue == "请选择") {
        Toast("请选择分类");
        return;
      }
      var str = localStorage.getItem("userid"); //取
      let userid = JSON.parse(str);
      let datevalue = this.formatDate(new Date().getTime()); //时间年月日时分秒
      let prePushTime = datevalue.substring(0, 11); //取年月日
      this.list = []
      Indicator.open();
      this.$http({
        method: "post",
        url: api.baseURL + "search",
        params: {
          inParam: {
            time: prePushTime,
            sysCode: "FH_PUBOPE",
            userId: userid,
            terminalType: 1,
            accId: 1,
            keyWord: this.keyWord,
            resKind: this.selectIndex,
            currentPage: this.pageIndex,
            pageSize: 10
          }
        }
      })
        .then(response => {
          console.log(this.selectIndex);
          if (response.data.state == "F") {
            Toast("暂无数据");
            // Indicator.close();
          } else {
            if (this.pageIndex == 1) {
              this.list = response.data.data;
            } else {
              let newList = response.data.data;
              this.list = this.list.concat(newList);
            }
          }
          console.log(this.list);
          Indicator.close();
        })
        .catch(error => {
          Toast("请求错误");
          Indicator.close();
        });
    },
    openPic() {
      this.sheetVisible = true;
    },
    selectV(actions, index) {
      this.selectValue = actions.name;
      switch (index) {
        case 0:
          this.selectIndex = 1;
          break;
        case 1:
          this.selectIndex = 5;
          break;
        case 2:
          this.selectIndex = 4;
          break;
        case 3:
          this.selectIndex = 3;
          break;
        case 4:
          this.selectIndex = 2;
          break;
        default:
          break;
      }
    },
    loadTop() {
      //下拉加载
      console.log("下拉");
      this.pageIndex = 1;
      this.getSearchList();
      this.$refs.loadmore.onTopLoaded(); // 固定方法，查询完要调用一次，用于重新定位
    },
    loadBottom() {
      // 上拉加载
      this.pageIndex++;
      this.getSearchList();
      console.log("上拉");
      this.$refs.loadmore.onBottomLoaded(); // 固定方法，查询完要调用一次，用于重新定位
    }
  }
};
</script>

<style scoped>
.list_box {
  margin-top: 45px;
  /* height: 500px; */
  height: 100vh;
  overflow: scroll;
}
.list_box ul li {
  padding: 20px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #efefef;
}
.list_box span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list_box img {
  width: 20px;
  height: 20px;
}
li:first-child {
  border-top: 1px solid #efefef;
}
.home-title {
  height: 45px;
  background: #e60012;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bg-color {
  background-color: #e60012;
  color: #ffffff;
}
.home-title .home-search {
  flex: 1;
  width: 80%;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  padding: 0 8px;
  padding-left: 60px;
  outline: medium;
  border: none;
}
.search_box {
  position: relative;
  width: 70%;
}
.home-title .search {
  font-size: 15px;
  margin: 0 15px;
  color: #fff;
  display: block;
}
.select_box {
  font-size: 14px;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 60px;
  height: 30px;
  line-height: 30px;
}
</style>